<template>
  <div class="bilibili-home">
    <!-- 顶部导航栏 -->
<!--    <NavigationBar />-->

    <!-- 轮播图区域 -->
    <section class="banner-section">
      <div class="container">
        <BannerCarousel :banners="bannerData" />
      </div>
    </section>

    <!-- 频道导航 -->
    <section class="channel-nav-section">
      <div class="container">
        <ChannelNav :channels="channelData" @channel-change="handleChannelChange" />
      </div>
    </section>

    <!-- 主内容区 -->
    <main class="main-content">
      <div class="container content-grid">
        <!-- 左侧视频流 -->
        <section class="video-feed">
          <!-- 推荐视频 -->
          <VideoSection
              title="推荐视频"
              :videos="recommendVideos"
              type="recommend"
              @load-more="loadMoreVideos"
          />

          <!-- 热门视频 -->
          <VideoSection
              title="热门视频"
              :videos="hotVideos"
              type="hot"
              show-ranking
          />

          <!-- 最新视频 -->
          <VideoSection
              title="最新发布"
              :videos="newVideos"
              type="new"
          />
        </section>

        <!-- 右侧边栏 -->
        <aside class="sidebar">
          <!-- 用户卡片（登录状态） -->
          <UserQuickCard v-if="userInfo.isLogin" :user="userInfo" />

          <!-- 排行榜 -->
          <RankingCard :rankings="rankingData" />

          <!-- 直播推荐 -->
          <LiveCard :lives="liveData" />

          <!-- 活动公告 -->
          <AnnouncementCard :announcements="announcementData" />

          <!-- 友情链接 -->
          <FriendLinks :links="friendLinks" />
        </aside>
      </div>
    </main>

    <!-- 底部导航 -->
    <FooterSection />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
// import { useRouter } from 'vue-router'

// 组件导入
// import NavigationBar from './NavigationBar.vue'
import BannerCarousel from './BannerCarousel.vue'
import ChannelNav from './ChannelNav.vue'
import VideoSection from './VideoSection.vue'
import UserQuickCard from './UserQuickCard.vue'
import RankingCard from './RankingCard.vue'
import LiveCard from './LiveCard.vue'
import AnnouncementCard from './AnnouncementCard.vue'
import FooterSection from './FooterSection.vue'

// const router = useRouter()

// 用户信息
const userInfo = reactive({
  isLogin: true,
  username: 'A站用户',
  avatar: 'https://cdn.jsdelivr.net/gh/bilibili-helper/bilibili-helper@master/images/avatar.png',
  level: 4,
  coins: 256,
  vip: true
})

// 轮播图数据
const bannerData = ref([
  {
    id: 1,
    image: 'https://i0.hdslb.com/bfs/archive/5e7a0a0c1a2a3b4c5d6e7f8g9h0i1j2k3l4m5n6o7p8q9r0s1t2u3v4w4x5y6z.jpg',
    title: '2024拜年纪预热',
    desc: '精彩内容即将上线',
    link: '/activity/2024-newyear',
    type: 'activity',
    color: '#FF6B6B'
  },
  {
    id: 2,
    image: 'https://i0.hdslb.com/bfs/archive/a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6.jpg',
    title: '新番导视',
    desc: '一月新番强势来袭',
    link: '/anime/2024-winter',
    type: 'anime',
    color: '#4ECDC4'
  },
  {
    id: 3,
    image: 'https://i0.hdslb.com/bfs/archive/b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b.jpg',
    title: '游戏发布会',
    desc: '多款新游首次曝光',
    link: '/game/new-release',
    type: 'game',
    color: '#45B7D1'
  }
])

// 频道数据
const channelData = ref([
  { id: 'recommend', name: '推荐', icon: '🎯', active: true },
  { id: 'live', name: '直播', icon: '🔴', active: false },
  { id: 'anime', name: '番剧', icon: '📺', active: false },
  { id: 'guochuang', name: '国创', icon: '🐼', active: false },
  { id: 'music', name: '音乐', icon: '🎵', active: false },
  { id: 'dance', name: '舞蹈', icon: '💃', active: false },
  { id: 'game', name: '游戏', icon: '🎮', active: false },
  { id: 'knowledge', name: '知识', icon: '📚', active: false },
  { id: 'tech', name: '科技', icon: '💻', active: false },
  { id: 'sports', name: '运动', icon: '⚽', active: false },
  { id: 'car', name: '汽车', icon: '🚗', active: false },
  { id: 'life', name: '生活', icon: '🏠', active: false },
  { id: 'food', name: '美食', icon: '🍔', active: false },
  { id: 'animal', name: '动物', icon: '🐱', active: false },
  { id: 'kichiku', name: '鬼畜', icon: '👻', active: false },
  { id: 'fashion', name: '时尚', icon: '👗', active: false },
  { id: 'ent', name: '娱乐', icon: '🎭', active: false },
  { id: 'cinephile', name: '影视', icon: '🎬', active: false },
  { id: 'documentary', name: '纪录片', icon: '📹', active: false },
  { id: 'movie', name: '电影', icon: '🎞️', active: false },
  { id: 'tv', name: '电视剧', icon: '📺', active: false },
  { id: 'variety', name: '综艺', icon: '😂', active: false }
])

// 视频数据
const recommendVideos = ref([])
const hotVideos = ref([])
const newVideos = ref([])
const rankingData = ref([])
const liveData = ref([])
const announcementData = ref([])
const friendLinks = ref([])

// 加载状态
const loading = ref({
  recommend: false,
  hot: false,
  new: false
})

// 处理频道切换
const handleChannelChange = (channelId) => {
  // 更新频道激活状态
  channelData.value.forEach(channel => {
    channel.active = channel.id === channelId
  })

  // 加载对应频道数据
  loadChannelData(channelId)
}

// 加载频道数据
const loadChannelData = async (channelId) => {
  // 模拟API调用
  loading.value.recommend = true
  try {
    await new Promise(resolve => setTimeout(resolve, 800))
    // 这里应该是实际的API调用
    console.log(`加载频道: ${channelId}`)
  } finally {
    loading.value.recommend = false
  }
}

// 加载更多视频
const loadMoreVideos = async () => {
  loading.value.recommend = true
  try {
    await new Promise(resolve => setTimeout(resolve, 600))
    // 模拟加载更多数据
    const newVideos = generateVideos(8, recommendVideos.value.length)
    recommendVideos.value.push(...newVideos)
  } finally {
    loading.value.recommend = false
  }
}

// 生成模拟视频数据
const generateVideos = (count, startIndex = 0) => {
  return Array.from({ length: count }, (_, i) => {
    const index = startIndex + i + 1
    return {
      id: index,
      title: `【${getRandomTag()}】${getRandomTitle()} ${index}`,
      cover: `https://picsum.photos/320/180?random=${index}`,
      upName: getRandomUPName(),
      upAvatar: `https://picsum.photos/40/40?random=${index + 1000}`,
      playCount: Math.floor(Math.random() * 1000000) + 1000,
      danmakuCount: Math.floor(Math.random() * 10000) + 100,
      duration: `${Math.floor(Math.random() * 10)}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
      publishTime: `${Math.floor(Math.random() * 24)}小时前`,
      badge: Math.random() > 0.7 ? '热门' : Math.random() > 0.8 ? '新星' : '',
      ranking: i < 3 ? i + 1 : null
    }
  })
}

// 工具函数
const getRandomTag = () => {
  const tags = ['搞笑', '游戏', '音乐', '舞蹈', '美食', '科技', '生活', '动物', '鬼畜']
  return tags[Math.floor(Math.random() * tags.length)]
}

const getRandomTitle = () => {
  const titles = [
    '这个视频太精彩了！不看后悔一辈子',
    '全网首发！最新技术分享',
    '搞笑时刻，笑到肚子疼',
    '深度解析，带你了解背后的故事',
    '教程向，手把手教你学会',
    '实测对比，哪个更好用？',
    'vlog日常，记录美好生活'
  ]
  return titles[Math.floor(Math.random() * titles.length)]
}

const getRandomUPName = () => {
  const names = ['老番茄', '某幻君', '中国BOY', '花少北', 'LexBurner', '凉风Kaze', '木鱼水心', '罗翔说刑法']
  return names[Math.floor(Math.random() * names.length)]
}

// 初始化数据
const initData = () => {
  recommendVideos.value = generateVideos(20)
  hotVideos.value = generateVideos(10)
  newVideos.value = generateVideos(15)

  // 排行榜数据
  rankingData.value = Array.from({ length: 10 }, (_, i) => ({
    rank: i + 1,
    title: `热门视频 ${i + 1}`,
    upName: `UP主${i + 1}`,
    playCount: Math.floor(Math.random() * 1000000) + 100000,
    change: Math.random() > 0.5 ? 'up' : 'down'
  }))

  // 直播数据
  liveData.value = Array.from({ length: 5 }, (_, i) => ({
    id: i + 1,
    title: `【直播】精彩直播内容 ${i + 1}`,
    cover: `https://picsum.photos/200/120?random=${i + 2000}`,
    upName: `主播${i + 1}`,
    viewerCount: Math.floor(Math.random() * 10000) + 1000,
    category: ['游戏', '音乐', '聊天', '学习'][i % 4]
  }))

  // 公告数据
  announcementData.value = [
    { id: 1, title: '系统维护公告', content: '今晚凌晨进行系统维护', time: '2小时前', type: 'system' },
    { id: 2, title: '社区规则更新', content: '请遵守社区规范', time: '1天前', type: 'rule' },
    { id: 3, title: '新功能上线', content: '新增弹幕互动功能', time: '3天前', type: 'feature' }
  ]

  // 友情链接
  friendLinks.value = [
    { name: '创作中心', link: '/upload', icon: '✏️' },
    { name: '直播中心', link: '/live', icon: '🔴' },
    { name: '游戏中心', link: '/game', icon: '🎮' },
    { name: '会员购', link: '/mall', icon: '🛒' }
  ]
}

onMounted(() => {
  initData()
})
</script>

<style scoped>
.bilibili-home {
  min-height: 100vh;
  background: #f4f4f4;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

.container {
  max-width: var(--container-wide-width, 1400px);
  margin: 0 auto;
  padding: 0 var(--spacing-lg, 20px);
  width: 100%;
  box-sizing: border-box;
}

.banner-section {
  background: linear-gradient(135deg, #00a1d6 0%, #0091c6 100%);
  padding: 20px 0;
}

.channel-nav-section {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-content {
  padding: 20px 0;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.video-feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sidebar {
    position: static;
    order: -1;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }

  .banner-section {
    padding: 12px 0;
  }

  .main-content {
    padding: 12px 0;
  }

  .video-feed {
    gap: 16px;
  }
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>